<template>
  <div class="form-home-area">
    <template v-if="columns.length">
      <div class="table-action">
        <a-space :size="4">
          <a-button class="add" type="primary" @click="onClick('add')">
            <template #icon>
              <rb-icon type="icon-luoshu-add" />
            </template>
            新增
          </a-button>
          <a-button type="text" @click="onClick('remove')">
            <template #icon>
              <rb-icon type="icon-luoshu-remove" />
            </template>
            删除
          </a-button>
        </a-space>
      </div>
      <TableWrapper
        :columns="columns"
        :formProperty="formProperty"
        @onOpenDrawer="onOpenDrawer"
      />
      <DataDrawer
        :visible="drawerVisible"
        :mode="mode"
        :schemaCode="schemaCode"
        :schemaName="schemaName"
        :form="form"
        :curBizObject="curBizObject"
        @onClose="onClose"
        @onRefresh="onRefresh"
      />
    </template>
    <div v-else class="empty">
      <a-spin v-if="isLoading" size="large" />
      <rb-icon v-else type="icon-luoshu-empty" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { message, Modal } from 'ant-design-vue';
import { ResponseHandle } from '@/global/util/preUtils';
import { GetColumns } from '@/global/util/formTable';
import TableWrapper from '@/views/formHome/components/homeArea/TableWrapper.vue';
import DataDrawer from '@/views/formHome/components/homeArea/DataDrawer.vue';

export default defineComponent({
  name: 'FormHomeArea',
  components: {
    TableWrapper,
    DataDrawer,
  },
  setup() {
    const store = useStore();
    const schemaCode = computed(() => store.state.formHome.curSchemaCode);
    const schemaName = computed(() => store.state.formHome.curSchemaName);
    const form = computed(() => store.state.formHome.form);
    const isLoading = computed(() => store.state.formHome.isLoading);
    const formCards = computed(() => store.state.formHome.form.formCards);
    const formProperty = computed(() => store.state.formHome.form.formProperty);
    const columns = computed(() =>
      GetColumns(formCards.value, formProperty.value),
    );
    const selectedRowKeys = computed(
      () => store.state.formHome.selectedRowKeys,
    );
    const mode = computed({
      get: () => store.state.formHome.mode,
      set: (val) => store.commit('formHome/SetMode', val),
    });
    const curBizObject = ref({});
    const drawerVisible = ref(false);

    const onClick = async (type: string) => {
      switch (type) {
        case 'add':
          drawerVisible.value = true;
          mode.value = 'add';
          break;
        case 'remove':
          if (!selectedRowKeys.value.length) {
            message.warning('没有选中任何行');
          } else {
            Modal.confirm({
              title: '确定删除?',
              content: '确定删除选中的数据，请确认!',
              async onOk() {
                const res = await store.dispatch('formHome/removeFormBiz');
                // ResponseHandle(res, () => message.success('删除成功'));
                if (res.code === 0) {
                  store.dispatch('formHome/getFormBiz', {
                    schemaCode: schemaCode.value,
                  });
                } else {
                  message.warning('操作失败');
                }
              },
            });
          }
          break;
        default:
          break;
      }
    };
    const onClose = () => {
      drawerVisible.value = false;
      curBizObject.value = {};
      // 清楚填写的数据
      store.commit('formHome/ClearFormCardsValue');
    };
    const onRefresh = () => {
      store.dispatch('formHome/getFormBiz', {
        schemaCode: schemaCode.value,
      });
    };
    const onOpenDrawer = (type: string, record: any) => {
      mode.value = type;
      curBizObject.value = record;
      drawerVisible.value = true;
    };

    watchEffect(async () => {
      if (schemaCode.value) {
        await store.dispatch('formHome/getFormBiz', {
          schemaCode: schemaCode.value,
        });
      }
    });

    return {
      isLoading,
      mode,
      drawerVisible,
      schemaCode,
      schemaName,
      form,
      formCards,
      formProperty,
      columns,
      curBizObject,
      onClick,
      onClose,
      onRefresh,
      onOpenDrawer,
    };
  },
});
</script>

<style lang="less" scoped>
.form-home-area {
  flex: 1;
  height: 100%;
  // padding: 16px;
  overflow-y: auto;
  transition: all 0.5s;
  background-color: @rb-background-color;
  .table-action {
    height: 52px;
    min-height: 52px;
    padding: 0 32px;
    .ant-space {
      height: 100%;
    }
    .rb-icon {
      color: @rb-label-color;
      padding-right: 4px;
    }
    .add {
      .rb-icon {
        color: @rb-text-color-light;
      }
    }
  }
  .empty {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    .rb-icon {
      font-size: 200px;
      cursor: auto;
    }
  }
}
</style>
